<template>
	<view class="content">
		<view class="tab_tag">
			<u-tabs :list="list1" lineColor="#53c393" disabled = true @click="tagclick"></u-tabs>
		</view>
		<view class="view_list">
			<view class="list">
				<view class="list_status" style="border-bottom: 3rpx solid #d9d9d9;">
					<view class="tit_l">
						<text class="status_cs">出售</text><text class="status_tit">USDT</text>
					</view>
					<view class="time_r">
						<text class="status_time">00:01:05自动取消</text>
						<text class="status_info">待支付<text class="iconfont icon-xiangyoujiantou"></text></text>
					</view>
				</view>
				<view class="order_content">
					<view class="view_c" style="padding:10rpx 0;">
						<view class="c_number_z">
							<view class="fontColor">订单金额</view>
							<view class="fontColor">1315.80USDT</view>
						</view>
						<view class="c_number_z number_z_cen" >
							<view class="fontColor">订单单价</view>
							<view class="fontColor">7.6元/USDT</view>
						</view>
						<view class="c_number_z">
							<view class="fontColor">结算时间</view>
							<view class="fontColor">0-12小时</view>
						</view>
					</view>
				</view>
				<view class="order_content">
					<view class="view_c" style="padding:10rpx 0;">
						<view class="c_number_z">
							<view class="fontColor">订单编号</view>
							<view class="fontColor texta">TON202307272103896456</view>
						</view>
						<view class="c_number_z number_z_cen" >
							<view class="fontColor">回款金额</view>
							<view class="fontColor">￥10000.08</view>
						</view>
						<view class="c_number_z">
							<view class="fontColor">订单收益</view>
							<view class="fontColor">￥460.53</view>
						</view>
					</view>
				</view>
				<view class="list_status" style="border-top: 3rpx solid #d9d9d9;">
					<view class="tit_l">
						<text class="status_cs" style="color: #999999;font-size: 28rpx;">2023.07.27 23:23:23</text>
					</view>
					<view class="time_r" style="display: flex;align-items: center;">
						<view><u-button type="primary" class="list_c" size="mini" :plain="true" color="#53c393" text="查看详情" @click="infoClick"></u-button></view>
					</view>
				</view>
			</view>
			
		</view>
		
		<TabBarCenter/>
	</view>
</template>

<script>
	import TabBarCenter from '../../../components/tabbarcenter.vue';
	export default {
		components:{TabBarCenter
		},
		data() {
			return {
				list1: [
					{name: '全部',}, {name: '待收款',}, {name: '待确认'}, {name: '待纠纷'}, {name: '已完成'}],
				cookies:{},
			}
		},
		onLoad() {
			this.cookies = JSON.parse(localStorage.getItem("cookies"))
			this.ordertFn(this.cookies&&this.cookies[0].uid,0)
		},
		methods: {
			tagclick(v){
				console.log(v)
				this.ordertFn(this.cookies&&this.cookies[0].uid,v.index)
			},
			infoClick(){
				uni.navigateTo({
				    url:`../../orderinfo/index?content=${'订单详情'}`
				});
			},
			// 接口
			// 获取我的订单
			ordertFn(uid,status){
				uni.request({
					url:'/index/api/get_myorder',
					method:'post',
					data:{uid:uid,ostaus:status},
					success:res=>{
						
					
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
.content{
	height: 100vh;background-color: #f1f5f8;
	.tab_tag{background-color: #fff;text-align: center;display: flex;justify-content: center;}
	.view_list{
		padding: 0 20rpx;
		.list{border-radius:20rpx;
			background-color: #fff;margin-top:20rpx;padding:0 20rpx;
			.list_status{display: flex;
				height: 100rpx;line-height: 100rpx;padding-bottom:10rpx;
				.tit_l{flex: 1;
					.status_cs{flex: 1;align-items: center;padding-right:10rpx;
						color: #53c393;line-height: 56rpx;font-size: 40rpx;font-weight: 600;	
					}
					.status_tit{flex: 1;
						color: #000;font-weight: 500;padding-right:70rpx;
						background: url(../../../static/tabbar/u_icon.png) no-repeat 92rpx center;background-size: 20%;
					}
				}
				.time_r{
					.status_time{color: #f9855e;font-size: 26rpx;padding-right: 20rpx;}
					.status_info{color: #000;font-size: 30rpx; cursor: pointer;}
				}
			}
			.order_content{
				.view_c{
					display: flex;
					.c_number_z{flex: 1;
						view:nth-child(1){line-height: 40rpx;font-size: 24rpx;color:#999999;font-weight: 400;}
						view:nth-child(2){font-size: 24rpx;line-height: 34rpx;color:#000;font-weight: 400;
							&.texta{
								width:200rpx;flex: 1; overflow: hidden; text-overflow:ellipsis; white-space: nowrap;
							}
						}
						&.number_z_cen{
							text-align: left;
						}
					}
				}
				
			}
			
		}
	}
	
}
</style>